<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal "
    :ellipsis="false"
    @select="handleSelect"
    style="background-color: #f5f5f5"
  >
    <el-menu-item index="0"
      ><div
        class="headImg"
        @click="dialogVisible = true"
        :style="{ backgroundImage: 'url(' + userImg + ')' }"
      ></div
    ></el-menu-item>
    <div class="flex-grow"></div>
    <el-menu-item index="1" style="color: #ec971f" @click="jumpTo"
      >校园生活</el-menu-item
    >
  </el-menu>
  <div class="boddy">
    <div>
      <el-card class="box-card" style="background-color: #f5f5f5">
        <template #header>
          <div class="card-header" style="color: #ec971f">关注列表</div>
        </template>
        <div v-for="v in focusList" :key="v" class="text item">
          <img
            :src="v.headImage"
            class="imgs"
            style="float: left; margin-left: 15px"
          />
          <span style="margin-left: 5px" @click="findList(v.id)">{{
            v.personName
          }}</span>
          <el-button
            size="small"
            type="info"
            plain
            class="butt"
            @click="deleteFocus(v.id)"
            >取关</el-button
          >
        </div>
      </el-card>
    </div>
    <div class="box">
      <el-input
        class="inputarea"
        v-model="form.messageInfo"
        maxlength="200"
        placeholder="请输入内容"
        show-word-limit
        type="textarea"
        rows="5"
      />
      <div class="fabu1">
        <el-button type="warning" @click="getLifeInfo()">世界消息</el-button>
        <el-button type="warning" @click="getLifeInfoPrivate()">我的</el-button>
        <el-button type="warning" @click="getLifeInfoFriends()"
          >朋友圈</el-button
        >
      </div>
      <div class="fabu">
        <el-button type="warning" @click="push(form)">发布</el-button>
        <el-select v-model="form.power" filterable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="comments">
        <div class="comment" v-for="(v, index) in comments" :key="v.id">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="v.headImage" class="image" />
            <span class="imageText" style="margin-top: 6px; margin-left: 8px"
              ><el-button
                size="small"
                type="warning"
                plain
                @click="focus(v.userId)"
                >关注+</el-button
              ></span
            >
            <span class="imageText" style="margin-top: 8px; margin-left: 5px">{{
              v.personName
            }}</span>
            <div style="padding: 14px">
              <div>{{ v.messageInfo }}</div>
              <div class="bottom" style="margin-top: 15px">
                <time class="time">{{ v.createTime }}</time>
                <el-button text class="button" @click="like(v.id, index)"
                  >点赞<el-icon><Pointer /></el-icon
                  >{{ v.likeNum != 0 ? v.likeNum : "" }}</el-button
                >
                <el-button @click="getComment(v.id)" text class="button"
                  >评论<el-icon><ChatLineSquare /></el-icon
                ></el-button>
                <el-button
                  text
                  class="button"
                  @click="deleteComment(v.id, index)"
                  >删除<el-icon><Delete /></el-icon
                ></el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <el-drawer
        v-model="drawerform.drawer"
        title="评论"
        :before-close="handleClose"
      >
        <el-input
          class="inputarea"
          v-model="drawerform.icomment"
          maxlength="100"
          placeholder="请输入内容"
          show-word-limit
          type="textarea"
          rows="3"
        />
        <el-button type="warning" @click="pushComment()">发布</el-button>
        <div class="comment" v-for="v in icomments" :key="v.id">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="v.headImage" class="image" />
            <span class="imageText" style="margin-top: 6px; margin-left: 8px"
              ><el-button size="small" type="warning" plain
                >关注+</el-button
              ></span
            >
            <span class="imageText" style="margin-top: 8px; margin-left: 5px">{{
              v.username
            }}</span>
            <div style="padding: 14px">
              <div>{{ v.comment }}</div>
              <div class="bottom" style="margin-top: 15px">
                <time class="time" style="float: right">{{
                  v.createTime
                }}</time>
              </div>
            </div>
          </el-card>
        </div>
      </el-drawer>
      <el-dialog
        v-model="dialogVisible"
        title="编辑信息"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 460px"
        >
          <el-form-item label="昵称">
            <el-input v-model="formLabelAlign.personName" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formLabelAlign.password" show-password />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="formLabelAlign.personAge" />
          </el-form-item>
          <el-form-item label="学校">
            <el-input v-model="formLabelAlign.schoolName" />
          </el-form-item>
          <el-form-item label="头像地址">
            <el-input v-model="formLabelAlign.headImage" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateUserInfo()">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  UserInfo,
  FocusOn,
  CancelFollow,
  GetFollows,
  UpdateUser,
} from "@/api/user";
import {
  AddLifeInfo,
  GetLifeInfo,
  Like,
  Delete,
  GetComment,
  AddComment,
  FriendLife,
} from "@/api/lifeInfo";
export default {
  name: "LifeInfoView",
  data() {
    return {
      formLabelAlign: {
        personName: "",
        password:"",
        personAge: 0,
        schoolName: "",
        headImage: "",
      },
      dialogVisible: false,
      focusList: [
        {
          id: 0,
          personName: "",
          headImage: "",
        },
      ],
      drawerform: {
        drawer: false,
        icomment: "",
        id: 0,
      },
      userImg: "",
      likeFlag: false,
      form: {
        power: 1,
        messageInfo: "",
      },
      lifeInfoDTO: {
        messageInfo: "",
        power: 1,
        userId: 0,
        lastTime: "",
      },
      comments: [
        {
          id: 0,
          userId: 0,
          personName: "",
          headImage: "",
          messageInfo: "",
          power: 0,
          createTime: "",
          likeNum: 0,
        },
      ],
      icomments: [
        {
          username: "",
          headImage: "",
          comment: "",
          createTime: "",
        },
      ],
      options: [
        {
          value: 1,
          label: "公开",
        },
        {
          value: 2,
          label: "自己可见",
        },
        {
          value: 3,
          label: "粉丝可见",
        },
      ],
    };
  },
  methods: {
    jumpTo() {
      this.$router.replace("/life");
    },
    getUserInfo() {},
    authError(code) {
      if (code === "444") {
        this.$router.push({ path: "/" });
      }
    },
    push(form) {
      if (form.messageInfo != "") {
        AddLifeInfo(form).then((result) => {
          this.authError(result.data.code);
          if (result.data.code === "200") {
            this.$message({
              message: "发布成功",
              type: "success",
              showClose: true,
            });
            this.form.messageInfo = "";
            GetLifeInfo({
              power: 1,
            }).then((result) => {
              this.authError(result.data.data.code);
              this.comments = result.data.data.data;
            });
          } else {
            this.$message({
              message: "发布失败",
              type: "error",
              showClose: true,
            });
          }
        });
      }
    },
    like(infoId, index) {
      Like({ infoId: infoId }).then(() => {
        this.comments[index].likeNum++;
      });
    },
    deleteComment(id, index) {
      Delete({ id: id }).then((result) => {
        this.authError(result.data.data.code);
        if (result.data.code === "200") {
          this.$message({
            message: "删除成功",
            type: "success",
            showClose: true,
          });
          GetLifeInfo({
            power: 1,
          }).then((result) => {
            this.authError(result.data.data.code);
            this.comments = result.data.data.data;
          });
        } else {
          this.$message({
            message: "不能删除他人信息",
            type: "error",
            showClose: true,
          });
        }
      });
    },
    getComment(infoId) {
      this.drawerform.drawer = true;
      this.drawerform.id = infoId;
      GetComment({ infoId: infoId }).then((result) => {
        this.icomments = [];
        this.icomments = result.data.data;
      });
    },
    pushComment() {
      AddComment({
        comment: this.drawerform.icomment,
        lifeInfoId: this.drawerform.id,
      }).then((result) => {
        this.getComment(this.drawerform.id);
        this.drawerform.icomment = "";
      });
    },
    focus(id) {
      FocusOn({
        uid: id,
      }).then((result) => {
        console.log(result);
        if (result.data.code === "200") {
          this.$message({
            message: "关注成功",
            type: "success",
            showClose: true,
          });
          this.focusList = [];
          this.getFollows();
        } else {
          this.$message({
            message: result.data.message,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    deleteFocus(id) {
      CancelFollow({
        uid: id,
      }).then(() => {
        this.$message({
          message: "取关成功",
          type: "success",
          showClose: true,
        });
        this.focusList = [];
        this.getFollows();
      });
    },
    getFollows() {
      GetFollows().then((result) => {
        this.focusList = result.data.data;
      });
    },
    findList(id) {
      GetLifeInfo({
        userId: id,
        power: 1,
      }).then((result) => {
        this.authError(result.data.data.code);
        this.comments = result.data.data.data;
      });
    },
    getLifeInfo() {
      GetLifeInfo({
        power: 1,
      }).then((result) => {
        this.authError(result.data.data.code);
        this.comments = result.data.data.data;
      });
    },
    getLifeInfoPrivate() {
      GetLifeInfo({
        power: 2,
      }).then((result) => {
        this.authError(result.data.data.code);
        this.comments = result.data.data.data;
      });
    },
    getLifeInfoFriends() {
      FriendLife().then((result) => {
        this.authError(result.data.data.code);
        this.comments = result.data.data.data;
      });
    },
    updateUserInfo(){
      UpdateUser(this.formLabelAlign).then((result)=>{
        this.dialogVisible=false
        this.formLabelAlign={}
        this.getUserInfo()
      })
    },
    getUserInfo(){
      UserInfo()
      .then((result) => {
        this.authError(result.data.data.code);
        this.userImg = result.data.data.headImage;
      })
      .catch(() => {});
    }
  },
  created() {
    this.getUserInfo();
    this.getLifeInfo();
    this.getFollows();
  },
};
</script>
<style>
.boddy {
  box-sizing: border-box;
  display: flex;
}
.card-header {
  display: block;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.box-card {
  text-align: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 240px;
}
.headImg {
  border-radius: 50%;
  height: 57px;
  width: 57px;
  background-size: 100% 100%;
}
.inputarea {
  display: block;
  width: 100%;
  margin-bottom: 8px;
}
.box {
  box-sizing: border-box;
  width: 65%;
  margin: 20px auto;
  height: 160px;
}
.fabu {
  display: flex;
  float: right;
}
.fabu1 {
  display: flex;
  float: left;
}
.comments {
  margin: 20px auto;
  margin-top: 60px;
  display: block;
}
.image {
  display: block;
  border-radius: 50%;
  float: left;
  width: 40px;
  height: 40px;
}
.imageText {
  display: block;
  float: left;
}
.comment {
  margin: 20px auto;
  margin-top: 20px;
}
.butt {
  float: right;
}
.imgs {
  display: inline-block;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
</style>